<template>
    <div class="cart">
        <div style="text-align: center;font-size: 40px"><span>购物车</span></div>
        <el-table
                ref="multipleTable"
                :data="list"
                border
                style="width: 80% ;margin: 0 auto"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" akjuijlign="center"></el-table-column>
            <el-table-column prop="spotName" width="180" align="center" label="项目"></el-table-column>

            <el-table-column width="200" align="center" label="预览">
                <template slot-scope="scope">
                    <el-image
                            :src="scope.row.path"
                            style="width: 100px; height: 100px;border-radius: 50%"
                            :preview-src-list="srcList"
                            >

                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="kind" label="票种" width="100" align="center"></el-table-column>
            <el-table-column prop="dateTime" label="日期" width="240" align="center">
                <template slot-scope="scope">
                    <div class="block">
                        <el-date-picker
                                :picker-options="pickerOptions0"
                                v-model="scope.row.dateTime"
                                type="date"
                                placeholder="修改日期"
                                value-format="yyyy-MM-dd"
                                @change="changeTicket(scope.row)">
                        </el-date-picker>
                    </div>
                </template>
            </el-table-column>


            <el-table-column prop="price" label="价格（元）" align="center"></el-table-column>

            <el-table-column prop='number' label="数量（张）" align="center" width="220">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.number" :min="1" :max="scope.row.ticketStock" label="描述文字"
                                     @change="updateCart(scope.$index)"></el-input-number>
                    <br>
                    余票：{{scope.row.ticketStock}}张
                </template>

            </el-table-column>


            <el-table-column v-if="show" prop="userId"></el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="medium" @click="balance(scope.row)" round>结算</el-button>
                    <el-button size="medium" type="danger" @click="handleDelete(scope.$index, scope.row)" round>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>


        <div class="total_warpper">

            <span>票数：{{totalNumber}}张</span>
            <br>
            <span>共计：{{totalPrice}}元</span>
            <br>
            <el-button size="medium" @click="balance()" type="success" round :disabled="!multipleSelection.length">全部结算
            </el-button>
        </div>
    </div>


</template>

<script>


    import cart from '@/api/cart'

    export default {
        data() {
            return {
                pickerOptions0: {
                    disabledDate(time) {
                        let faketime1 = 3600 * 24 * 1000;
                        let faketime2 = 3600 * 24 * 2 * 1000;
                        return time.getTime() > Date.now() + faketime2 || time.getTime() < Date.now() - faketime1;

                    }
                },
                show: false,
                imageURL: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmmbiz-qpic-cn.weituibao.com%2Fmmbiz_png%2FdUWfr7hlepeDlictv6h5dvJQFIxnXJX6AfHriaE3aAfmKfeT51jxxPvsPCbRvKribpAuWLvqCrkOK4Lia85rpsD7ow%2F640.png&refer=http%3A%2F%2Fmmbiz-qpic-cn.weituibao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628832915&t=a6f41994caa150417986575c5207d65e',
                testdata: "ABCDEFG",
                Onedata: [],
                list: null,
                orderlist: null,
                multipleSelection: [], //存放已选择的数据
                srcList: [
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmmbiz-qpic-cn.weituibao.com%2Fmmbiz_png%2FdUWfr7hlepeDlictv6h5dvJQFIxnXJX6AfHriaE3aAfmKfeT51jxxPvsPCbRvKribpAuWLvqCrkOK4Lia85rpsD7ow%2F640.png&refer=http%3A%2F%2Fmmbiz-qpic-cn.weituibao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628832915&t=a6f41994caa150417986575c5207d65e'
                ],
                formData: {
                    name: "",
                    price: "",
                    number: ""
                },
                editData: {},
                formLabelWidth: "200",
                //表格中的数据
                cartId: "",
                isChecked: true,
            };
        },
        created() {
            this.getList();


        },


        methods: {

            updateCart(index) {
                let temp = this.list[index]
                cart.update(temp.cartId, temp.number)
                    .then(response => {
                        console.log(response)
                    })
            },
            changeTicket(temp) {
                cart.changeTicket(temp.cartId, temp.dateTime)
                    .then(response => {
                        console.log(response)
                        temp.ticketStock = response.data.data.ticket.ticketStock;

                    })
                        temp.ticketStock = response.data.data.ticket.ticketStock;
            },


            alipaytest() {
                cart.alipay()
                    .then(response => {
                        console.log("成功")
                        console.log(response)
                    })
            },


            balance(a) {
                console.log(a)
                if (!arguments.length == 0) {
                    this.Onedata.push(a)
                    console.log(this.Onedata)
                    console.log(4343434343)
                    cart.addOrder(this.Onedata)

                        .then(response => {
                            this.$router.push('/order/' + response.data.data.orderId)
                        })
                }
                else {
                    console.log(67876897)
                    console.log(this.multipleSelection)

                    cart.addOrder(this.multipleSelection)
                        .then(response => {
                            this.$router.push('/order/' + response.data.data.orderId)


                        })
                }

            },


            // show() {
            //     cart.test(this.testdata)
            //         .then(response => {
            //             alert(111111111)
            //             console.log(response)
            //         })
            //
            // },
            getList() {
                cart.getAllList(JSON.parse(localStorage.getItem("Authorization")).userId)
                    .then(response => {
                        this.list = response.data.data.cartList;
                        console.log(this.list)
                        console.log(this.list[0].ticketStock)
                       // this.submit111()

                    })
            },


            // 点击发生的变化
            handleSelectionChange(val) {
                this.multipleSelection = val; //给定义的数组赋值
                console.log(999999999999999999999999)
                console.log(this.multipleSelection)
            },
            handleDelete(index) {
                let temp = this.list[index].cartId
                console.log(temp)

                cart.delete(temp)
                    .then(response => {
                        this.getList()
                        console.log(response)
                    })

            },
            /*          点击弹出添加弹窗
                        addDialog() {
                            this.addIsDialog = true;
                        },*/
            // 点击添加弹窗的确定按钮
            addSureBtn() {
                this.addIsDialog = false;
                this.tableData.push(this.formData);
            },
            // 点击弹出添加弹窗
            editDialog(index, row) {
                /*
                                this.editIsDialog = true;
                */
                this.editData = row;
            },
            // editSureBtn(row, index) {
            //     this.editIsDialog = false;
            // }
        },
        // 通过computed计算属性及时改变
        computed: {
            // 总价
            totalPrice() {
                var price_total = 0;
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    price_total +=
                        this.multipleSelection[i].price * this.multipleSelection[i].number;
                }
                return price_total;
            },
            // 总数
            totalNumber() {
                var number_total = 0;
                for (var i = 0; i < this.multipleSelection.length; i++) {
                    number_total += this.multipleSelection[i].number;
                }
                return number_total;
            }
        },
        components: {}
    };
</script>

<style scoped>

    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: transparent;
    }

    /* 表格内背景颜色 */
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
        background-color: rgba(145, 192, 252, 0.15);
        color: white;
    }
    .cart {
        margin: auto;
        width: 1300px;
    }

    .addDialog .el-input {
        width: 90%;
    }

    .total_warpper {
        text-align: right;
        margin-top: 10px;
        margin-right: 200px;
    }

    .total_warpper span {
        margin-right: 15px;
    }
    .cart {
        background:url("../assets/backgroud/bk3.jpg") no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: fixed;
    }


</style>